<template>
    <div class="main">
        <Content>
            <template #content>
                <div class="top-box ">
                    <div class="boxs dispaly">
                        <div class="left">
                            <img :src="state.urlQueryData.img">
                        </div>
                        <div class="right dispaly-column-between">
                            <div class="top">
                                <div class="t-title">{{ state.urlQueryData.name }}</div>
                                <div class="desc">{{ state.urlQueryData.desc }}</div>
                            </div>
                            <div class="btn-box">
                                <div class="btn dispaly-align-center" @click="submit">祭祖</div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="b-w p-20-30 box">
                    <el-row class="dispaly-between">
                        <el-col :span="6">
                            <div class="cate">
                                <div :class="{ 'active': state.current == index }" class="item pointer"
                                    @click="clickCate(item, index)" v-for="(item, index) in state.cateList"
                                    :key="index">{{ item.name }}
                                </div>
                            </div>
                        </el-col>
                        <el-col :span="18">
                            <div class="title">{{ state.urlQueryData.name }}</div>
                            <div class="list">
                                <div v-if="!state.dataLlist.length" class="empty dispaly-col-center">
                                    <el-empty description="暂无数据" :image-size="200" />
                                </div>
                                <div class="person-list ">
                                    <div @click="item.isSelect = !item.isSelect" class="person-item pointer "
                                        v-for="(item, index) in state.dataLlist" :key="index">
                                        <div class="avatar">
                                            <img :src="item.img">
                                            <div class="select" v-if="item.isSelect">
                                                <img src="/src/assets/image/sel.png">
                                            </div>
                                        </div>
                                        <div class="desc ">
                                            <div class="desc-item"> <span>¥</span> {{ item.price }}</div>
                                            <div class="desc-item over-1">{{ item.name }}</div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </el-col>
                    </el-row>
                    <div class="page">
                        <el-pagination @current-change="pageChange" layout="prev, pager, next" :total="state.total" />
                    </div>
                </div>
            </template>
        </Content>
        <Pop />
    </div>
</template>

<script setup>
import { reactive, onMounted, ref } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { getProductList, getProductCateList } from '@/api/index/index'
import { ElMessage } from 'element-plus'
import { useIndexPopStore } from '@/store/modules/indexPop'
const indexPopStore = useIndexPopStore()

const state = reactive({
    cateList: [],
    dataLlist: [],
    current: 0,
    cateItem: {},
    title: '',
    urlQueryData: {},
    queryData: {
        pageNum: 1,
        pageSize: 8,
    },
    total: 0
})

// 获取商品分类
const getProductCateData = async () => {
    const res = await getProductCateList({ type: 1 })
    if (res.code == 200) {
        state.cateList = res.data
    }
}

// 获取商品列表
const getProductListData = async () => {
    const typeId = state.cateItem.id ? state.cateItem.id : state.cateList[0].id
    state.queryData.typeId = typeId
    const res = await getProductList(state.queryData)
    if (res.code == 200) {
        state.total = res.total
        state.dataLlist = res.rows
        state.dataLlist.forEach(item => item.img = item.imgs.split(',')[0])
    }
}


// 祭祖
const router = useRouter()
const submit = () => {
    if (localStorage.getItem('token')) {
        // 选中的商品
        const selectItemList = state.dataLlist.filter(item => item.isSelect)
        if (selectItemList.length) {
            let data = {
                id: state.urlQueryData.id,
                ancestralId: state.urlQueryData.hallId || null,
                productList: selectItemList,
            }
            // 携带新的参数打开新页面
            let routeUrl = router.resolve({ path: '/settlement', query: { data: JSON.stringify(data) } })
            window.open(routeUrl.href, '_blank')
        } else {
            ElMessage.error({
                message: '请选择商品',
                duration: 3000
            })
        }
    } else {
        ElMessage.error({
            message: '请先登录',
            duration: 3000
        })
        indexPopStore.isShowPop = true
    }

    // let idList = ref([])
    // selectItemList.forEach(item => idList.value.push(item.id))
}

// 点击分类
const clickCate = (item, index) => {
    init()
    state.cateItem = item
    state.current = index
    state.queryData.typeId = item.id
    getProductListData()
}

const init = () => {
    state.queryData.pageNum = 1
    state.dataLlist = []
}

// 分页
const pageChange = (page) => {
    state.queryData.pageNum = page
    getProductListData()
}


// 获取query参数
const route = useRoute()
const getQuery = () => {
    state.urlQueryData = JSON.parse(route.query.data)
}

onMounted(async () => {
    getQuery()
    await getProductCateData()
    await getProductListData()
})
</script>

<style lang="scss" scoped>
.active {
    background-color: $primary-color !important;
    color: #fff !important;
}

.btn {
    font-family: MicrosoftYaHei;
    font-size: 22px;
    color: $primary-color;
    background-color: #ece7dc;
    width: 200px;
    height: 50px;
    border-radius: 5px;
    cursor: pointer;
}

.main {
    .top-box {
        padding: 30px;
        background-color: #fff;

        .boxs {
            padding-bottom: 30px;
            border-bottom: 2px solid #EDE7DB;

            .left {
                width: 282px;
                height: 282px;
                padding-right: 30px;
                border-right: 2px dashed #ccc;

                img {
                    width: 282px;
                    height: 282px;
                    background: #20212A;
                    border-radius: 5px;
                }
            }

            .right {
                padding-left: 35px;
                flex: 3;

                .btn-box {
                    display: flex;
                    justify-content: flex-end;
                }

                .top {
                    .t-title {
                        margin-bottom: 23px;
                        font-family: MicrosoftYaHei, MicrosoftYaHei;
                        font-weight: bold;
                        font-size: 24px;
                    }

                    .desc {
                        font-family: MicrosoftYaHei;
                        font-size: 16px;
                        color: #000000;
                        line-height: 30px;
                    }
                }
            }

        }

    }

    .banner {
        width: 100%;
        height: 300px;

        img {
            width: 100%;
            height: 100%;
        }
    }

    .box {
        position: relative;
        max-height: $c-height;
        min-height: $c-height;

        .cate {
            overflow-y: scroll;
            max-height: $c-height;
            min-height: $c-height;

            .item:last-child {
                margin-bottom: 0;
            }

            .item:hover {
                color: $primary-color;
            }

            .item {
                padding: 20px 10px;
                background-color: #ece7dc;
                color: #333;
                font-family: MicrosoftYaHei;
                font-size: 22px;
                margin-top: 8px;

            }
        }

        .title {
            font-family: MicrosoftYaHei;
            font-size: 20px;
            color: #000001;
            border-bottom: 2px solid #EDE7DB;
            padding-bottom: 15px;
            margin-left: 40px;
            margin-bottom: 20px;
        }

        .list {
            margin-left: 40px;
            max-height: 800px;
            min-height: 800px;
            overflow-y: scroll;

            .empty {
                min-height: 800px;
            }

            .person-list {
                display: flex;
                flex-wrap: wrap;

                // .person-item:nth-of-type(3n + 0) {
                //     margin-right: 0;
                // }

                .person-item {
                    margin: 0 10px 15px 0px;

                    .avatar {
                        position: relative;

                        img {
                            width: 200px;
                            height: 286px;
                            border-radius: 5px;
                        }

                        .select {
                            position: absolute;
                            top: 5px;
                            right: 10px;

                            img {
                                width: 38px;
                                height: 38px;
                            }
                        }
                    }

                    .desc {
                        background: #EDE7DB;
                        border-radius: 5px;
                        padding: 8px 0;
                        max-width: 200px;

                        .desc-item:hover {
                            color: $primary-color;
                        }

                        .desc-item:first-child {
                            color: $primary-color;
                            font-size: 30px;
                        }

                        .desc-item {
                            padding-left: 20px;
                            font-family: MicrosoftYaHei;
                            font-size: 16px;
                            color: #333333;

                            span {
                                color: $primary-color;
                                font-size: 18px;
                            }
                        }
                    }
                }
            }
        }

        .page {
            display: flex;
            justify-content: flex-end;
            position: absolute;
            right: 0;
            bottom: $bto;
        }
    }
}

:deep(.is-active) {
    background-color: $primary-color !important;
    border-radius: 50% !important;
    color: #fff !important;
}
</style>